<template>
  <div>
    <div class="font-size-16 font-weight-700 padding-bottom-20">{{pageType == "parking" ? "当前被委托方" : "当前客户"}}</div>
    <el-table :data="client.currentCustomerList" :border="false" stripe align="left">
      <el-table-column property="partnerName" :label="pageType == 'parking' ? '被委托方' : '客户名称'"></el-table-column>
      <el-table-column label="起止时间" width="220">
        <template slot-scope="scope">
            {{scope.row.startDate | date-format('YYYY-MM-DD')}}
            <span>至</span>
            {{scope.row.endDate | date-format('YYYY-MM-DD')}}
        </template>
      </el-table-column>
      <el-table-column label="品牌" width="200" v-if="pageType != 'parking'">
        <template slot-scope="scope">
          <span>{{scope.row.operateBrand}}</span>
        </template>
      </el-table-column>
      <el-table-column label="黑名单" width="90">
        <template slot-scope="scope">
          <span>{{scope.row.ifBlackList ? '是' : '否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="remark" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click.stop="handleView(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="font-size-16 font-weight-700 padding-top-bottom-20">{{pageType == "parking" ? "历史被委托方" : "历史客户"}}</div>
    <el-table :data="client.historyCustomerList" :border="false" stripe align="left">
      <el-table-column property="partnerName" :label="pageType == 'parking' ? '被委托方' : '客户名称'"></el-table-column>
      <el-table-column label="起止时间" width="220">
        <template slot-scope="scope">
            {{scope.row.startDate | date-format('YYYY-MM-DD')}}
            <span>至</span>
            {{scope.row.endDate | date-format('YYYY-MM-DD')}}
        </template>
      </el-table-column>
      <el-table-column label="品牌" width="200" v-if="pageType != 'parking'">
        <template slot-scope="scope">
          <span>{{scope.row.operateBrand}}</span>
        </template>
      </el-table-column>
      <el-table-column label="黑名单" width="90">
        <template slot-scope="scope">
          <span>{{scope.row.ifBlackList ? '是' : '否'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" prop="remark" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click.stop="handleView(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { requestTips, askDialog } from '@js/utils';
  import { formValid } from '@/lib/utils';
  import {apiContractCustomerInfo} from '@a/about';

  export default {
    props: {
      model: {
        type: Object,
        default: null,
      },
      pageType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        client:{}
      };
    },
    mounted() {
      this.getDataSource();
    },
    methods:{
      handleView(row){
        let url = '/businessAssets/clientManage/info?isRefresh=true&headerName=客户详情&isHiddenTools=1&tab=contract&customerKey=' + row.primaryKey + '&clientName=' + row.partnerName;
        window.open(url);
      },
      //客户信息
      async getDataSource() {
        let res = await apiContractCustomerInfo({ contractKey: this.model.contractKey, assetCode: this.model.code, contractCode: this.model.contractCode, year: this.$route.query.year, month: this.$route.query.month });
        this.client = res
      },
    }
  };
</script>
<style lang="scss" scoped>
  .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf {
    background: #f1f1f1;
  }
  ::v-deep .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none;
  }
  ::v-deep .el-table thead .cell {
    font-size: 14px;
  }
</style>
